<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/html_head :: head(~{::title},~{},~{})">
  <title>智汇| 消息</title>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
  <!-- 主 头部 -->
  <header th:insert="common/top :: top"></header>
  <!-- 左侧菜单，包含logo、搜索、菜单-->
  <aside th:insert="common/left :: left"></aside>

  <!-- Content Wrapper. 页面内容 -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        我的消息
        <small> 我收到的消息提醒</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="/index"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">我的消息</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-md-12">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title"><span th:text="${messageType}"></span>
                <small><span th:text="${#lists.size(messageList)}">3</span> 条消息</small></h3>
              <div class="box-tools pull-right">
                <a onclick="readAllMessageByType()" name="readAll">全部标记为已读 </a>
                <div th:if="${not #lists.isEmpty(messageList)}">
                  | <a onclick="deleteAllMessageByType()" name="deleteAll"> 清空所有消息</a>
                </div>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body no-padding">
              <div class="table-responsive mailbox-messages">
                <table class="table table-hover table-striped">
                  <tbody>
                    <tr th:if="${#lists.isEmpty(messageList)}">
                      <td colspan="5" style="text-align:center">这里干干净净哟~</td>
                    </tr>
                  <tr th:each="message : ${messageList}" th:id="'message-' + ${message.id}" th:onclick="readMessageById([[${message.id}]])">
                      <td width="3%"><i th:if="${not message.read}" class="fa fa-circle text-red" th:id="'messageReadState-' + ${message.id}" name="unreadMark"></i></td>
                      <!--<td width="30%" class="mailbox-subject">
                        <span th:text="${message.title}">标题</span>
                      </td>-->
                      <td width="50%" class="mailbox-name">
                          <a th:href="${message.href}" th:text="${#strings.abbreviate(message.content,30)}">内容</a>
                      </td>
                      <td width="15%"class="mailbox-date" th:text="${#dates.format(message.createTime,'MM-dd HH:mm')}">5 mins ago</td>
                      <td width="3%">
                        <button type="button" class="btn btn-default btn-sm" th:onclick="deleteMessageById([[${message.id}]])">
                          <i class="fa fa-trash-o"></i>
                        </button>
                      </td>
                  </tr>
                  </tbody>
                </table>
                <!-- /.table -->
              </div>
              <!-- /.mail-box-messages -->
            </div>
            <!-- /.box-body -->
            <div class="box-footer no-padding">
              <div class="mailbox-controls">
                <a onclick="readAllMessageByType()" name="readAll">全部标记为已读 </a>
                <div th:if="${not #lists.isEmpty(messageList)}">
                  | <a onclick="deleteAllMessageByType()" name="deleteAll"> 清空所有消息</a>
                </div>

                <!--<div class="pull-right">
                  1-50/200
                  <div class="btn-group">
                    <button type="button" class="btn btn-default btn-sm"><i class="fa fa-chevron-left"></i></button>
                    <button type="button" class="btn btn-default btn-sm"><i class="fa fa-chevron-right"></i></button>
                  </div>
                </div>-->
                <!-- /.pull-right -->
              </div>
            </div>
          </div>
          <!-- /. box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  </div>
  <!-- /.content-wrapper -->

  <!-- 页脚 -->
  <footer th:insert="common/bottom :: footer"></footer>
  <!-- Control Sidebar 右侧边栏 -->
  <aside th:insert="common/right :: aside"></aside>
  <!-- 右侧边栏的背景，必须紧接着control sidebar放这个  -->
  <div th:insert="common/right :: aside2"></div>
</div>
<!-- ./wrapper -->
<!-- Js 脚本 -->
<div th:insert="common/html_js :: div_js"></div>
<script>
      if($('i[name="unreadMark"]').length == 0)
          $('a[name="readAll"]').remove();

      var messageTypeCode = window.location.pathname.charAt(window.location.pathname.length - 1);

    function deleteMessageById(comentId){
        var targetUrl = '/message/delete/' + comentId;
        $.ajax({
            type:'post',
            url:targetUrl,
            dataType:'json',
            success:function(data){
                if(data.message == "success"){
                    $('#message-' + comentId).remove();
                    alert("删除成功");
                }else{
                    alert("操作失败" + data.detail);
                }
            },
            error:function(){
                alert("错误");
            }
        })
    }
    function deleteAllMessageByType(){
        // 全部标记已读
        if($('tr[onclick]').length == 0)
            return;
        var targetUrl = '/message/deleteAll/' + messageTypeCode;
        $.ajax({
            type:'post',
            url:targetUrl,
            dataType:'json',
            success:function(data){
                $('tr[onclick]').remove();
                $('a[name="deleteAll"]').remove();
                $('a[name="readAll"]').remove();
            }
        })
    }
    function readMessageById(messageId){
        // 标记已读
        if(! $('#messageReadState-' + messageId).length > 0)
            return;
        var targetUrl = '/message/read/' + messageId;
        $.ajax({
            type:'post',
            url:targetUrl,
            dataType:'json',
            success:function(data){
                $('#messageReadState-' + messageId).remove();
            }
        })
    }
    function readAllMessageByType(){
        // 全部标记已读
        if($('i[name="unreadMark"]').length == 0)
            return;
        var targetUrl = '/message/readAll/' + messageTypeCode;
        $.ajax({
            type:'post',
            url:targetUrl,
            dataType:'json',
            success:function(data){
                $('i[name="unreadMark"]').remove();
                $('a[name="readAll"]').remove();
            }
        })
    }
</script>
</body>
</html>